@import "./../common/common";
.categoryUl {
  padding: 0;
  li {
    list-style: none;
    padding: 1rem 1.5rem;
    transition: all 0.1s;
    border-bottom: 1px dotted fade(@themeR,30);
    &.active {
      color: white;
      background-color: @themeR;
    }
    &:hover{
      color: white;
      background-color: fade(@themeR,60)
    }
  }
}

.mainLeft {
  >.card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    margin-bottom: 1rem;
  }
}

.mainRight {
  >.card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    padding: 0.25rem 0.5rem;
  }
  .searchWrap{
    display: flex;
    align-items: center;
    >input{
      margin: 0.5rem;
      border: 1px solid transparent!important;
      border-bottom: 1px solid fade(@themeR,60)!important;
      &:focus{
        border: 1px solid @themeR!important;
      }
    }
  }
  .sortBtns{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .active{
      background-color: @themeR;
      color: white!important;
    }
    >*{
      margin: 0.5rem;
      flex: 1;
      width: fit-content;
    }
  }
}

.mainLeft,
.mainRight {
  margin: 1rem 0 1rem
}

@media (max-width: 991px) {
  main>.row>.mainLeft>.categoryUl {
    padding: 0;
    justify-content: space-between;
    li {
      text-align: center;
      &:before{
        content: ' —— ';
      }
      &:after{
        content: ' —— ';
      }
    }
  }
}